<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=320, initial-scale=1" />
	<title>jsmpeg-vnc</title>
	<style type="text/css">
		body {
			background: #111;
			text-align: center;
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			color: #555;
		}

		body.desktop .mobile-only {
			display: none;
		}

		body.mobile .desktop-only {
			display: none;
		}

		#videoCanvas {
			/* Always stretch the canvas to 100%, regardless of its
			internal size. */
			width: 100%;
			height: 100%;
		}

		.keys {
			position: relative;
		}

		.key {
			color: #fff;
			float: left;
			width: 72px;
			height: 48px;
			padding-top: 24px;
			background-color: #5bcbeb;
			position: absolute;
		}

		.key-small {
			height: 28px;
			padding-top: 8px;
		}

		#key-up {
			left: 40px;
			top: 0px;
		}

		#key-down {
			left: 40px;
			top: 88px;
		}

		#key-left {
			left: 160px;
			top: 0px;
		}

		#key-right {
			left: 240px;
			top: 0px;
		}

		#key-esc {
			left: 160px;
			top: 124px;
		}

		#key-enter {
			left: 240px;
			top: 124px;
		}
	</style>
</head>

<body>
	<canvas id="videoCanvas" width="640" height="480"></canvas>

	<div class="keys mobile-only">
		<div class="key" data-code="38" id="key-up">UP</div>
		<div class="key" data-code="40" id="key-down">DOWN</div>
		<div class="key" data-code="39" id="key-right">RIGHT</div>
		<div class="key" data-code="37" id="key-left">LEFT</div>

		<div class="key key-small" data-code="27" id="key-esc">ESC</div>
		<div class="key key-small" data-code="13" id="key-enter">ENTER</div>
	</div>

	<script type="text/javascript" src="jsmpg.js"></script>
	<script type="text/javascript" src="jsmpg-vnc.js"></script>
</body>

</html>